<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="static/iframe/bootstrap/css/bootstrap.min.css"
	rel="stylesheet">
</head>
<body>
<div class="row">
	<div class="col-xs-5">
		<select name="from" class="multiselect form-control" size="8" multiple="multiple" data-right="#multiselect_to_1" data-right-all="#right_All_1" data-right-selected="#right_Selected_1" data-left-all="#left_All_1" data-right-selected="#left_Selected_1">
			<option value="1">Item 1</option>
			<option value="2">Item 5</option>
			<option value="2">Item 2</option>
			<option value="2">Item 4</option>
			<option value="3">Item 3</option>
		</select>
	</div>
	
	<div class="col-xs-2">
		<button type="button" id="right_All_1" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
		<button type="button" id="right_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
		<button type="button" id="left_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
		<button type="button" id="left_All_1" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
	</div>
	
	<div class="col-xs-5">
		<select name="to" id="multiselect_to_1" class="form-control" size="8" multiple="multiple"></select>
	</div>
</div>
</body>
<script type="text/javascript" src="static/plugins/jq/jquery-3.2.1.js"></script>
<script type="text/javascript" src="static/iframe/bootstrap/bootstrap-multiselect/multiselect.min.js"></script>
<script type="text/javascript">
$(document).ready(function($) {
	$('.multiselect').multiselect({
		right: '#multiselect_to_1',
		rightAll: '#right_All_1',
		rightSelected: '#right_Selected_1',
		leftSelected: '#left_Selected_1',
		leftAll: '#left_All_1'
	});
});
</script>
</html>